@charset "utf-8";
@charset "utf-8";
@import "common/reset";
@function r($px) {
    @return $px/100*1rem;
}

$color:#FF9344;
//
.wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 r(21);
    header {
        .back-btn {
            width: r(123);
            height: r(57);
            background-color: transparent;
            border: r(2) solid $color;
            border-radius: r(18);
            font-size: r(26);
            margin-top: r(31);
            outline: none;
        }
        .select {
            width: r(163);
            height: r(60);
            border: r(3) solid $color;
            position: relative;
            margin-top: r(30);
            &::before {
                content: "";
                border: r(15) solid $color;
                border-color: $color transparent transparent transparent;
                position: absolute;
                top: r(22);
                right: r(11);
                z-index: 1;
            }
            select {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                border: none;
                -webkit-appearance: none;
                padding-left: r(20);
            }
        }
        .fenlei {
            width: 10%;
            margin: r(47) auto 0;
            font-size: r(26);
        }
    }
    section {
        width: 100%;
        position: absolute;
        left: 0;
        top: r(105);
        bottom: r(150);
        overflow: hidden;
        overflow-y: auto;
        padding: 0 r(21);
        .search {
            width: r(268);
            height: r(55);
            margin: r(32) auto 0;
            border-radius: r(55);
            border: r(3) solid $color;
            form {
                width: 100%;
                height: 100%;
                position: relative;
                input {
                    width: r(184);
                    height: r(49);
                    padding: 0 r(11) 0 r(5);
                    font-size: r(24);
                    color: #777777;
                    position: absolute;
                    top: 0;
                    left: r(25);
                    border: none;
                }
                button {
                    width: r(46);
                    height: r(49);
                    position: absolute;
                    background-color: transparent;
                    top: 0;
                    right: r(13);
                    &::before {
                        content: "";
                        width: r(25);
                        height: r(25);
                        border-radius: 50%;
                        border: r(3) solid $color;
                        position: absolute;
                        top: r(7);
                        left: r(5);
                    }
                    &::after {
                        content: "";
                        width: r(16);
                        height: r(6);
                        background-color: $color;
                        transform: rotate(45deg);
                        position: absolute;
                        top: r(36);
                        left: r(28);
                    }
                }
            }
        }
        .all-search {
            font-size: r(26);
            text-align: center;
            margin-top: r(31);
        }
        .all-table {
            width: r(512);
            height: r(131);
            margin: r(14) auto r(24);
            border: none;
            tr {
                td {
                    width: r(128);
                    font-size: r(20);
                    background-color: #dcdcdc;
                    text-align: center;
                    border: r(6) solid white;
                    a {
                        color: #898989;
                    }
                }
            }
        }
        //public title  S
        .hot-title {
            span:nth-of-type(1) {
                font-size: r(30);
                vertical-align: middle;
                i {
                    font-size: r(56);
                    color: $color;
                    vertical-align: middle;
                }
            }
            span:nth-of-type(2) {
                font-size: r(24);
                line-height: r(56);
                i {
                    font-size: r(25);
                    color: $color;
                }
            }
        }
        //public title  E
        .four-img {
            margin: r(30) 0;
            .fantuan {
                width: r(279);
                height: r(352);
                margin-right: r(9);
            }
            .right{
                width: r(420);
                height: r(352);
                .dandan{
                    width: 100%;
                    height: r(147);
                    margin-bottom: r(8);
                }
                .fanjuan{
                    width: r(195);
                    height: r(197);
                    margin-right: r(8);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .pinpan{
                    width: r(216);
                    height: r(197);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .tuijian {
            margin-top: r(25);
            .img-box {
                width: r(228);
                height: r(200);
                font-size: 0;
                margin-right: r(12);
                img {
                    width: 100%;
                    height: 100%;
                }
                &:last-of-type {
                    margin-right: 0;
                }
            }
        }
    }
}